<template>
	<div class="page-personal">

		<input type="file" id="img_upload" />
		<div id="img_area">
			
		</div>
		<div class="top">
			<div class="top-cont">
			<!--<input @change="upload" class="upload" type="file" />-->
			    <dropzone class="upload" id="myVueDropzone" :headers="headers" url="http://10.0.66.113:80/upm/api/v1/protected/user/photo" v-on:vdropzone-success="showSuccess">
			        <input type="hidden" name="token" value="xxx" class="data-test">
			    </dropzone>
				<img src="../static/img/test/test1234.jpg" />
			</div>
		</div>
		<ul class="clearFix">
			<li>
				<label>店名</label>
				<p>的说法是</p>
			</li>
			<li>
				<label>店编</label>
				<p>的说法是</p>
			</li>
			<li>
				<label>公司地址</label>
				<p>的说法是</p>
			</li>
			<li>
				<label>公司面积</label>
				<p>的说法是</p>
			</li>
		</ul>
		<ul class="clearFix">
			<li>
				<router-link to="/editName">
					<label>姓名</label>
					<p>小迷茫</p>
					<i></i>
				</router-link>
			</li>
			<li>
				<router-link to="/editPhone">
					<label>手机号</label>
					<p>18945888888</p>
					<i></i>
				</router-link>
			</li>
			<li>
				<router-link to="/editPassword">
					<label>修改密码</label>
					<p></p>
					<i></i>
				</router-link>
			</li>
		</ul>
		<ul class="clearFix">
			<li>
				<label>版本信息</label>
				<p>的说法是</p>
			</li>
		</ul>
		<div class="ctl-cont">
			<button @click="imgchange">退出登录</button>
		</div>
		<canvas id="myCanvas"></canvas>



    </div>
</template>

<script>
	import http from '../services/http';
	import Dropzone from 'vue2-dropzone';

	export default {
		name: 'personal',
    	data:function(){
    		return{
    			pwdStatus:false,
    			validateBan:false,
    			validateText:"获取验证码",
    			forms:{},
    			headers:{},
    			clears:{}
    		}
    	},
    	beforeMount(){
    		console.log('get headers');
    		this.headers = {'Authorization':`${localStorage.getItem("token")}`};
    		console.log(this.headers);
    	},
    	props:['toast'],
    	mounted(){
    		const {toast} = this;
    		http.get("http://10.0.66.113:80/upm/api/v1/protected/user/me",(redata)=>{
					console.log(redata)
					if(redata.success){
						toast('获取用户信息成功');
					}else{
						toast('获取用户信息--失败');
					}
				})
				var img_upload = document.getElementById("img_upload");
				var img_area = document.getElementById("img_area");
				img_upload.addEventListener('change', readFile, false);
				function readFile() {
					var file = this.files[0];
					if(!/image\/\w+/.test(file.type)) {
						alert("请确保文件为图像类型");
						return false;
					}
					var reader = new FileReader();
					reader.readAsDataURL(file);
					reader.onload = function() {
					//	base64_code.innerHTML = this.result;
						console.log(this.result);
						
						http.post('http://10.0.66.113:80/upm/api/v1/protected/user/photo',{
						    "photo":this.result
						},function(data){
							console.log(data);
						});
						
						
						
						img_area.innerHTML = '<div>图片img标签展示：</div><img src="' + this.result + '" alt=""/>';
					}
				}
    	},
    	methods:{
    		imgchange(){
				var canvas=document.getElementById('myCanvas');
				function dataURItoBlob(dataURI) {
				    // convert base64/URLEncoded data component to raw binary data held in a string
				    var byteString;
				    if (dataURI.split(',')[0].indexOf('base64') >= 0)
				        byteString = atob(dataURI.split(',')[1]);
				    else
				        byteString = unescape(dataURI.split(',')[1]);
				
				    // separate out the mime component
				    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
				
				    // write the bytes of the string to a typed array
				    var ia = new Uint8Array(byteString.length);
				    for (var i = 0; i < byteString.length; i++) {
				        ia[i] = byteString.charCodeAt(i);
				    }
				
				    return new Blob([ia], {type:mimeString});
				}
				var dataURL = canvas.toDataURL('../static/img/test/test123.jpg', 0.5);
				var blob = dataURItoBlob(dataURL);
				console.log(dataURL);
				console.log(blob);
				
    		},
    		getStatus(status){
    			this.pwdStatus = status;
    		},
    		formsChange(key){
    			const cur = this.$refs[key].value;
    			this.forms[key] = cur;
    			this.clears[key] = cur.length>0 ? true : false;
    			this.forms = {...this.forms};
    			this.clears = {...this.clears};
    		},
    		clear(key){
    			this.forms[key] = '';
    			this.clears[key] = false;
    			this.forms = {...this.forms};
    			this.clears = {...this.clears};
    		},
    		send(){
    			let self = this;
    			if(!this.validateBan){
    				let count = 60;
    				self.validateBan = true;
    				self.validateText = `已发送(${count}s)`;
    				const countDown = setInterval(function(){
    					if(count<=0){
    						clearInterval(countDown);
    						self.validateText = "获取验证码";
    						self.validateBan = false;
    					}else{
    						self.validateText = `已发送(${--count}s)`;
    					}
    				},1000)
    			}
    			
    		},
    		upload(e){
    			console.log(e)
    			console.log(1)
    		},
    		showSuccess(file) {
    			console.log(file);
		        console.log('A file was successfully uploaded')
	      	}

    	},
        components: {
            Dropzone
        }
    };
    
    
    
</script>
<style lang="scss">

.page-personal{
	.top{
		height: 160px;
		background: transparent url(../static/img/bg/personal-bg.jpg) no-repeat center / 100% 100%;
		position: relative;
		
		.top-cont{
			height: 90px;
			width: 90px;
			border-radius:50%;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -45px 0 0 -45px;
			overflow: hidden;
		}
		.upload{
			height: 90px;
			width: 90px;
			border-radius:50%;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -45px 0 0 -45px;
			opacity: 1;
			z-index: 20;
			min-height: 0;
		    padding: 0;
		    background: transparent;
		    border: none;
			
			.dz-message{
				display: none;
			}
			.dz-preview{
			    position: absolute;
			    left: 0;
			    top: 0;
			    margin: 0;
			    border: none;
			    height: 90px;
			    width: 90px;
			    min-height: 0;
			    border-radius: 50%;
			    overflow: hidden;
			    
			    .dz-image {
				    height: 90px!important;
				    width: 90px!important;
				    border-radius: 50%!important;
				}
				
				.dz-details{ display: none; }
				.dz-error-message{ display: none; }
				.dz-remove{ display: none; }
				.dz-error-mark{ display: none; }
				.dz-success-mark{ display: none; }
			}
		}
		img{
			height: 90px;
			width: 90px;
			position: absolute;
			top: 0;
			left: 0;
			margin: 0;
			z-index: 10;
		}
	}
	
	ul{
		margin-top: 10px;
		background: #ffffff;
		padding: 0 15px;
		width: 100%;
		
		li{
			position: relative;
			height: 51px;
			border-bottom: solid 1px #e6e6e6;
			line-height: 50px;
			
		}
		li:last-child{
			border: none;
		}
		li.last{
			border-bottom: none;
		}
		li label{
			position: absolute;
			left: 0;
			top: 0;
			color: #666666;
			font-size: 1rem;
		}
		li p{
			color: #222222;
			width: 100%;
			border: none;
			height: 100%;
			background: #ffffff;
			text-align: right;
			padding-left: 40px;
			text-overflow:ellipsis ;
			overflow: hidden;
			white-space: nowrap;
			font-size: 1rem;
		}
		li a{
			display: block;
			height: 100%;
			width: 100%;
			
			p{
				padding-right: 20px;
				color: #979797;
			}
		}
		li i{
			display: block;
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			width: 10px;
			background: transparent url(../static/img/icon/register-right.png) no-repeat center / 6px auto;
		}
	}
	
	.ctl-cont{
		background: #ffffff;
		margin-top: 10px;
		height: auto;
		
		button{
			color: #37d863;
			height: 50px;
			line-height: 50px;
			text-align: center;
			width: 100%;
			background: #ffffff;
			font-size: 1rem;
		}
	}
	
}









</style>
